<template>
    <Card style="margin-bottom: 20px" class="data-card">
        <div slot="title">
            <div class="card-title">
                <p>集装箱号：{{data.purchasingAgreementCode}}</p>
                <p class="flex-class"><img src="../../assets/images/order/matType.png" width="16" style="margin-right: 5px">品名：<span>{{ $utils.handleDictData(data.businessType, dictInfo.businessType) }}</span></p>
                <p class="flex-class"><img src="../../assets/images/order/matType.png" width="16" style="margin-right: 5px"> 保质期：<span>{{ getMatTypeName(data.agmtTypeName) }}</span></p>
            </div>
            <div class="overdue" v-if="data.contractValidityPeriodEnd && data.contractValidityPeriodEnd < (new Date()).getTime()">
                临期
            </div>
        </div>
        <div class="card-content">
            <Row class="card-word">
                <i-col span="4">
                    <p>件数</p>
                </i-col>
                <i-col span="4">
                    <p>
                        重量：<span>{{ $utils.handleDictData(data.entrustedEnterprise, dictInfo.customerId) }}</span>
                    </p>
                </i-col>
                <i-col span="4">
                    <p>
                        总价：<span></span>
                    </p>
                </i-col>
                <i-col span="4">
                    <p>
                        国别：<span>{{ data.entrustedAgreementCode }}</span>
                    </p>
                </i-col>
                <i-col span="4">
                    <p>
                        厂号：<span>{{ data.entrustedAgreementCode }}</span>
                    </p>
                </i-col>
            </Row>

            <Row style="margin-top: 25px; margin-bottom: 20px" class="card-word">
                <i-col span="4">
                    <p>
                        入库时间：<span>{{ $utils.handleDictData(data.payMethod, dictInfo.PaymentMethod) }}</span>
                    </p>
                </i-col>
                <i-col span="4">
                    <p>
                        堆存天数：<span>{{ data.agmtEarnestAmount }}({{ data.earnestAmountRate }}%)</span>
                    </p>
                </i-col>
                <i-col span="4">
                </i-col>
                <i-col span="4">
                </i-col>
                <i-col span="8" style="text-align: right;">
                    <p class="speedOfProgress" @click="speedOfProgressClick">
                        进度<Icon type="ios-arrow-down" :class="arrowClass" />
                    </p>
                </i-col>
            </Row>
        </div>
    </Card>
</template>

<script>
import _ from 'lodash';
export default {
    name: 'dataCard',
    props: {
        data: {
            type: Object,
            default() {
                return {};
            }
        },
        dictInfo: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            speedOfProgressShow: false,
            arrowClass: ''
        };
    },
    methods: {
        speedOfProgressClick() {
            this.speedOfProgressShow = !this.speedOfProgressShow;
            if (this.speedOfProgressShow) {
                this.arrowClass = 'top-arrow';
            } else {
                this.arrowClass = 'bottom-arrow';
            }
        },
        getMatTypeName(matTypeStr) {
            if (matTypeStr) {
                let matTypeCodeList = matTypeStr.split(',');
                return  _.uniq(matTypeCodeList).map(x => this.$utils.handleDictData(x, this.dictInfo.matType)).join(',');
            } else {
                return '';
            }
        }
    }
};
</script>

<style lang="less">
</style>
<style scoped lang="less">
.flex-class {
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-title {
    display: flex;
    width: 80%;
    text-align: center;
    height: 30px;
    p {
        border-right: 1px solid #d9d9d9;
        height: 30px;
        line-height: 30px;
        span {
            font-weight: normal;
        }
    }
    p:first-child {
        text-align: left;
    }
    p:first-child, p:last-child {
        border: none;
    }
}

.card-word {
    p {
        font-weight: 700;

        span {
            font-weight: 500;
        }
    }
}

@keyframes arrowChange {
    100% {
        transform: rotate(180deg);
    }
}
@keyframes arrowChange2 {
    100% {
        transform: rotate(0);
    }
}
.speedOfProgress {
    cursor: pointer;
}
.top-arrow {
    animation: arrowChange .5s;
    animation-fill-mode: forwards;
    transform: rotate(0);
}
.bottom-arrow {
    animation: arrowChange2 .5s;
    animation-fill-mode: forwards;
    transform: rotate(180deg);
}

.font-weight-bold {
    font-weight: 700;
    color: rgba(0, 0, 0, 0.85);
}

.overdue {
    width: 92px;
    height: 32px;
    background-color: rgba(214, 3, 3, 1);
    border-bottom-left-radius: 50px;
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
    text-align: center;
    line-height: 32px;
}
</style>
